<template>
	<view class="pages">
		<!-- #ifdef APP-PLUS-->
		<u-sticky offset-top="0" zIndex="10000" bgColor='#fff'>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-sticky offset-top="-44" zIndex="10000">
				<!-- #endif -->
				<view class="followTop">
					<view>
						<up-navbar :placeholder="true" :autoBack="true" title="添加科室"></up-navbar>
					</view>
					<view class="uSearch">
						<view class="searchBox">
							<u-search searchIcon="plus" searchIconSize="26rpx" maxlength="6" placeholder="添加科室" :showAction="keyword?true:false" v-model.trim="keyword" @search="search" @custom="search" bgColor="#F5F6F8" :clearabled="false" @change="change" @focus="focus" actionText="添加" :focus="focu" :actionStyle="{
                    color: '#00C1B9',
                    fontSize: '26rpx',
                    lineHeight: '37rpx',
                    marginRight: '35rpx',
                  }"></u-search>
						</view>
					</view>
				</view>
			</u-sticky>
			<view class="content">
				<view class="prop mar-b-20">{{`已设置科室（${tagList.length}/5）`}}</view>
				<view class="tag">
					<view class="tagItem u-flex mar-b-20" v-for="(item,index) in tagList" :key="index">
						<text class="itemName mar-r-16">{{item}}</text>
						<u-icon name="close" color="#AAAAAA" size="15" @click="deleTag(item,index)"></u-icon>
					</view>

				</view>

				<view v-if="tagList.length == 0" class="flex-column-row-start">
					<image src="https://ossresource.miyingbl.com/def/243d3202405231405385619.png" style="width:240rpx;height:200rpx;margin-top:26vh;margin-bottom:20rpx"></image>
					<view class="empty_text mar-b-10">暂无内容</view>
				</view>
			</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { doctorInfo } from '@/api/home'
	import { updateDoctorInfo } from '@/api/my'
	import { onLoad } from '@dcloudio/uni-app'
	const keyword = ref('')
	const focu = ref(false)
	const tagList = ref([])
	const userInfo = ref({})
	const search = () => {
		if(tagList.value.length < 5) {
			let arr = JSON.parse(JSON.stringify(tagList.value)) || []
			if(keyword.value.length < 2) {
				uni.showToast({
					title: '科室名称最少两个字',
					icon: 'none'
				})
				return false;
			}
			const list = tagList.value;
			for(var i in list) {
				if(keyword.value == list[i]) {
					uni.showToast({
						title: '请勿重复添加',
						icon: 'none'
					})
					return false;
				}
			}
			arr.push(keyword.value)
			if(type.value == 'open') {
				uni.$emit('updateTag', arr)
				keyword.value = ''
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				})
				tagList.value = arr
				return false;
			}
			if(type.value == 'edit') {
				updateDoctorInfo({
					type: 2,
					rf_name: arr.join(',')
				}).then((res) => {
					if(res.code == 200) {
						tagList.value.push(keyword.value)
						uni.showToast({
							title: '添加成功',
							icon: 'none'
						})
						keyword.value = ''
						uni.$emit('updateUserInfo')
					} else if(res.code == 4101 || res.code == 4102) {
						return uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		} else {
			uni.showToast({
				title: '最多可添加5个科室',
				icon: 'none'
			})
		}
	}
	const change = () => {}
	const focus = () => {}
	const deleTag = (item: any, index: number) => {
		let arr = JSON.parse(JSON.stringify(tagList.value)) || []
		arr.splice(index, 1)
		if(type.value == 'open') {
			uni.$emit('updateTag', arr)
			tagList.value = arr

			uni.showToast({
				title: '删除成功',
				icon: 'none'
			})
			return false;
		}
		if(type.value == 'edit') {
			if(arr.length == 0) {
				return uni.showToast({
					title: '至少保留一个科室',
					icon: 'none'
				})
			} else {
				updateDoctorInfo({
					type: 2,
					rf_name: arr.join(',')
				}).then((res) => {
					if(res.code == 200) {
						tagList.value = arr
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						uni.$emit('updateUserInfo')
					}
				})
			}
		}
	}
	async function getDoctorInfo() {
		const res = await doctorInfo()
		tagList.value = res.data.rf_name
		userInfo.value = res.data
	}
	async function updateInfo() {

		if(type.value == 'open') {
			uni.$emit('updateOpenInfo')
			return false;
		}
		// 1=修改医院名称2=修改科室名称3=修改职称4=修改头像5=修改擅长6=修改标签
		const params = {
			rf_name: tagList.value.join(','),
			type: 2
		}
		const res = await updateDoctorInfo(params)
		if(res.code == 200) {
			uni.$emit('updateUserInfo')
		} else {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		}
	}
	const type = ref('')
	onLoad((options) => {
		if(options.type == 'edit') {
			type.value = options.type
		} else if(options.type == 'open') {
			type.value = options.type
		}
		if(options.arr) {
			tagList.value = options.arr.split(',') || []
		} else {
			getDoctorInfo()
		}
	})
</script>

<style lang="scss" scoped>
	.pages {
		background: #F6F6F6;
		height: 100vh;
	}
	
	.followTop {
		width: 100%;
		background: #fff
	}
	
	.uSearch {
		padding: 0 24rpx 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		.searchBox {
			flex: 1;
			background: #F5F6F8;
			border-radius: 35rpx;
		}
	}
	
	.content {
		padding: 20rpx 24rpx;
		.prop {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #5C5C5C;
		}
	}
	
	.tag {
		display: flex;
		flex-wrap: wrap;
	}
	
	.tagItem {
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 10rpx 20rpx;
		min-width: 100rpx;
		margin-right: 20rpx;
		.itemName {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #202020;
		}
	}
	
	.empty_text {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #AAAAAA;
	}
</style>